import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import './iconfont/iconfont.css';
import './TabBar.css';

const TabBar = ({ initialTabIndex }) => {
    const [tabIndex, setTabIndex] = useState(initialTabIndex);
    const changeTab = (index) => {
        setTabIndex(index);
        console.log(index);
    };
    useEffect(() => {
        setTabIndex(initialTabIndex);
    }, [initialTabIndex]);
    return (
        <div className="tab-bar">
            <div className={`item ${tabIndex === 0 ? 'active' : ''}`} onClick={() => changeTab(0)}>
                <Link to="/">
                    <div className='iconfont icon-home'></div>
                    <div className='span'>首页</div>
                </Link>
            </div>
            <div className={`item ${tabIndex === 1 ? 'active' : ''}`} onClick={() => changeTab(1)}>
                <Link to="/productCategory">
                    <div className='iconfont icon-sort'></div>
                    <p className='span'>分类</p>
                </Link>
            </div>
            <div className={`item ${tabIndex === 2 ? 'active' : ''}`} onClick={() => changeTab(2)}>
                <Link to="/shoppingCar">
                    <div className='iconfont icon-gouwuchekong'></div>
                    <div className='span'>购物车</div>
                </Link>
            </div>
            <div className={`item ${tabIndex === 3 ? 'active' : ''}`} onClick={() => changeTab(3)}>
                <Link to="/user">
                    <div className='iconfont icon-gaiicon-'></div>
                    <div className='span'>我的</div>
                </Link>
            </div>
        </div>
    );
};

export default TabBar;
